<template>
    <div class="login-container">
        <div class="login">
            <div class="login-title">
                登录
            </div>
            <div style="margin-top: 8px;">
                <el-tag size="small">账号</el-tag>
                <el-input v-model="data.account"></el-input>
            </div>
            <div style="margin-top: 8px;">
                <el-tag size="small">密码</el-tag>
                <el-input type="password" v-model="data.password"></el-input>
            </div>
            <div style="margin-top: 8px;">
                <el-button plain style="width:100%" type="primary" @click="events.logins">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElLoading, ElMessage } from 'element-plus';
import { reactive } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router';
import { set_token } from '@/utils/auth';



//组合式api
const data = reactive<any>({
    account: '18473458030',
    password: '888888',
});

const router = useRouter();


const events = {
    logins() {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: '#d0eaf9',
        })
        axios.post("http://localhost:5000/api/login/logins", {
            account: data.account,
            password: data.password
        }).then((res: any) =>{
            loading.close();
            if (res.data.code === 0) {
                set_token(res.data.data);
                router.push('/');
            } else {
                ElMessage.error(res.message);
            }
        });
    }
}


</script>

<style scoped>
.login-container {
    width: 100vw;
    height: 100vh;
    background: #222;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #009ffc, #fff);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #d0eaf9, #d0eaf9);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

.login {
    width: 350px;
    margin: 0 auto;
    border: 1px solid #eee;
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    position: relative;
    top: 50px;
}

.login-title {
    text-align: center;
    color:#000;
    border-bottom: 1px solid #eee;
}

body {
    padding: 0;
    margin: 0;
}
</style>